<template>
  <div class="car-item-wrapper">
    <ul class="car-list-item" @click="handleDetailClick(item)" v-for="item in list" :key="item.id">
      <li>
        <van-image width="100" lazy-load height="100" :src="item.img" />
        <!-- 事件修饰符，帮助处理一些dom的额外问题，比如：事件冒泡，事件默认行为 -->
        <span class="is-collect" :class="item.collectFlag ? 'active' : ''" @click.stop="handleCollectClick(item)">
          收藏
        </span>
      </li>
      <li>
        <h2>{{ item.title }}</h2>
        <span style="color: blue">⭐️ ID:{{ item.id }}</span>
        |
        <span>里程：{{ item.mileage }}</span>
        |
        <span>车价：{{ item.price }}</span>
        |
        <span>距离远近：{{ item.distance }}</span>
        |
        <span style="color: red">发布时间：{{ item.publishTime }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)
import { mapMutations } from 'vuex'
export default {
  props: ['list'],
  methods: {
    ...mapMutations(['set_collect_arr']),
    handleDetailClick(item) {
      this.$router.push(`/detail/${item.id}`)
    },
    // 将收藏的车系数据，放置在vuex中，方便在其他组件中使用
    // 收藏事件-通过vue的事件修饰符调用，处理事件冒泡 @click.stop=name
    handleCollectClick(item) {
      this.set_collect_arr(item)
    },
  },
}
</script>

<style lang="scss" scoped>
.is-collect {
  width: 50px;
  height: 50px;
  background: lightblue;
  border-radius: 50%;
  color: #000;
  display: inline-block;
  line-height: 50px;
  text-align: center;
  &.active {
    background: lightcoral;
    color: #fff;
  }
}
</style>
